<template>
  <!-- 新的在线监测首页 FZSB-421 -->
  <div class="oil-color">
    <div class="oil-color-in">
      <div class="top">
        <onlinemonitormap />
      </div>
      <div class="bottom">
        <div ref="scroll" class="bottom-main">
          <div v-for="(item,index) in menulist" :key="index" class="centerbox">
            <div class="item" @click="handleMenuClick(item,index)" :class="{active:item.active}">
              <div class="centerbox">
                <i :class="item.iconfont" class="iconfont item-iconfont"></i>
              </div>
              <div class="item-name centerbox">{{item.name}}</div>
            </div>
          </div>
        </div>
        <div :class="colorLeft === 0 ? 'icons' : ''" class="icon icon-left">
          <span @click="left" class="iconfont iconxiayibu-copy"></span>
        </div>
        <div :class="colorRight === 0 ? 'icons' : ''" class="icon icon-right">
          <span @click="right" class="iconfont iconxiayibu-copy"></span>
        </div>
      </div>
    </div>
    <div class="oil-color-right">
      <div class="borderStyle">
        <div class="blueTitleStyle">监测装置</div>
        <div class="echa-box">
          <div
            class="InternetThings-con"
            v-loading="loading2"
            element-loading-text="数据加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
          >
            <Nodata v-if="nodata2" />
            <echa v-if="!nodata2" :dataList="dataList2" :xAxisData="xAxisData2" />
          </div>
        </div>
      </div>
      <div class="borderStyle">
        <div class="blueTitleStyle">设备预警</div>
        <div class="echa-box"></div>
      </div>
      <div class="borderStyle">
        <div class="blueTitleStyle">智能联动</div>
        <div class="echa-box"></div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import echarts from "echarts";
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import echa from "./echa/echa.vue";
import { onlinemonitormap } from "@/components";
import axios from "axios";
import { GetSocketModule } from "@/store/modules/GetSocketData";
import Nodata from "@/components/Nodata/index.vue";
import { menuListType } from "@/utils/interface";
@Component({
  components: { echa, onlinemonitormap, Nodata },
})
export default class Home extends Vue {
  // 所属地市
  private localCity: string = "8a1ea5c64bdebad1014bdebc55c80003";

  //设备list
  // 当前地市信息
  private CurrentOrg: any = {};
  //在线监测诊断分析
  abnormalData = {};
  //传图表得数据
  public xAxisData: any = ["总数", "预警数", "在线数"];
  public xAxisData2: any = ["总数", "异常数", "在线数"];
  public dataList: any = [];
  public dataList2: any = [];
  //监测装置 图表数据状态
  loading2 = false;
  nodata2 = false;
  //设备 图表数据状态
  loading = false;
  nodata = false;
  get newCurrentOrg() {
    let CurrentOrg = this.CurrentOrg;
    return CurrentOrg;
  }

  // 初始化页面
  private init() {
    // 获取当前地市
    (this as any).$services
      .getCurrentOrg({
        method: "get",
        data: {},
      })
      .then((result: any) => {
        // console.log("当前地市:", result);
        this.CurrentOrg = result.data;
        this.getSbslYc(this.CurrentOrg.SSDSMC);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  // 获取在线监测设备异常数据汇总
  private getSbslYc(ssdsmc: string) {
    axios({
      url:
        (window as any).VUE_APP_ONLINE + "/epribigdata/xinyi_ztZxjc/getSbslYc",
      method: "get",
      params: { ssdsmc: ssdsmc },
    })
      .then((result: any) => {
        // console.log("在线监测设备异常数据汇总:", result);
        let data = result;
        let zb = 0;
        let zhdq = 0;
        let kgg = 0;
        let blq = 0;
        data.map((v, i) => {
          if (v.SBLX == "0301") {
            //主变压器
            zb = v.YUJS;
          }
          if (v.SBLX == "0321") {
            //组合电器
            zhdq = v.YUJS;
          }
          if (v.SBLX == "0322") {
            //开关柜
            kgg = v.YUJS;
          }
          if (v.SBLX == "0318") {
            //避雷器
            blq = v.YUJS;
          }
        });
        this.abnormalData = {
          zb: zb,
          zhdq: zhdq,
          blq: blq,
          kgg: kgg,
        };
        //设备异常数据
        // console.log("this.abnormalData:", this.abnormalData);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  // 告警设备数/主变异常/避雷器异常/组合电器/开关柜跳转页面
  private goAlarmPage(tail: string) {
    let url =
      "http://10.193.23.21:28883/epribigdata/jsp/tg_zt/xinyi_zxjc/ycsb.jsp?ssds=";
    if (this.newCurrentOrg.SSDSBM == "8a1ea5c64bdebad1014bdebc4cbf0001") {
      //省公司
      window.open(url + null + "&sblx=" + tail + "&sbzt=02&jczt=01");
    } else {
      //地市公司
      window.open(
        url + this.newCurrentOrg.SSDSMC + "&sblx=" + tail + "&sbzt=02&jczt=01"
      );
    }
  }
  sbInit() {
    this.loading = true;
    let zxdw = GetSocketModule.getterZxdw;
    // console.log(zxdw);
    var sbList = GetSocketModule.getterAllAuxiliaryByXtId["03"];
    // console.log(sbList);

    // 将点位按照equipType分类
    let getSbObj = (arr) => {
      // console.log(arr);
      let sbObj = {};
      arr.forEach((item) => {
        let key = item.equipType;
        sbObj[key] = sbObj[key] || [];
        sbObj[key].push(item);
      });
      return sbObj;
    };
    // 判断设备是否在线
    let isOnline = (arr) => {
      let isOnline = true;
      arr.forEach((item) => {
        if (isOnline) {
          zxdw.forEach((v) => {
            if (item.dwValue === v) {
              if (item.value === "1") {
                isOnline = false;
              }
            }
          });
        }
      });
      return isOnline;
    };
    let znskSb = getSbObj(sbList) || [];

    var sbDwId = {};
    var sbZs = []; //设备总数
    var sbYjs = []; //设备预警数
    var sbZxs = []; //设备在线数
    var sbZmc = []; //设备名称
    // this.$delete(znskSb, "undefined");
    // console.log(znskSb);

    for (let key in znskSb) {
      if (key == "undefined") {
        var aa = "";
        znskSb[key].map((item) => {
          aa = aa + "," + item.id;
        });
        console.log("在线监测台账没有equipType的数据id", aa);
      }
      let sbZmcItem = "";
      znskSb[key].forEach((item) => {
        if (!sbZmcItem) {
          sbZmcItem = item.equipType;
        }
      });
      sbZmc.push(sbZmcItem);
      let item = znskSb[key];
      let sbObj = {};
      znskSb[key].forEach((item) => {
        let key = item.equipId;
        if (key) {
          sbObj[key] = sbObj[key] || [];
          sbObj[key].push(item);
        }
      });
      sbDwId[key] = sbObj;
    }

    for (let key in sbDwId) {
      // console.log(Object.keys(sbDwId[key]));

      sbZs.push(Object.keys(sbDwId[key]).length);
      var sbycsl = 0;
      var sbzxsl = 0;
      for (let k in sbDwId[key]) {
        var sbycsArr = retgj(sbDwId[key][k]);
        if (sbycsArr) {
          sbycsl++;
        }
        var sbzxsArr = isOnline(sbDwId[key][k]);
        if (sbzxsArr) {
          sbzxsl++;
        }
      }
      sbYjs.push(sbycsl);
      sbZxs.push(sbzxsl);
      this.loading = false;
      //   debugger
    }
    // console.log(sbZs);

    function retgj(arr) {
      var retgjstate = false;
      arr.forEach((item) => {
        if (item.isGj === "gj") {
          retgjstate = true;
          return;
        }
      });
      return retgjstate;
    }
    var sbArr = [];
    for (let index = 0; index < sbZmc.length; index++) {
      sbArr.push({
        name: sbZmc[index],
        total: sbZs[index],
        early: sbYjs[index],
        onLine: sbZxs[index],
      });
    }
    if (sbArr.length < 1) {
      this.nodata = true;
    }
    this.dataList = sbArr;

    //监测装置--------
    this.loading2 = true;
    var jczzId = {};
    var jczzZs = []; //监测装置总数
    var jczzYjs = []; //监测装置异常数
    var jczzZxs = []; //监测装置在线数
    var jczzZmc = []; //监测装置名称
    // 将点位按照deviceType分类
    let getJczzObj = (arr) => {
      let jczzObj = {};
      arr.forEach((item) => {
        let key = item.deviceType;
        jczzObj[key] = jczzObj[key] || [];
        jczzObj[key].push(item);
      });
      return jczzObj;
    };
    let znskJczz = getJczzObj(sbList) || [];

    for (let key in znskJczz) {
      jczzZmc.push(znskJczz[key][0].deviceTypeName);
      let item = znskJczz[key];

      let obj = {};
      item.forEach((v) => {
        obj[v.deviceId] = obj[v.deviceId] || [];
        obj[v.deviceId].push(v);
      });
      jczzId[key] = obj;
    }
    let _this = this;
    for (let key in jczzId) {
      jczzZs.push(Object.keys(jczzId[key]).length);
      var ycsl = 0;
      var zxsl = 0;
      for (let k in jczzId[key]) {
        var ycsArr = ycs(jczzId[key][k]);
        if (ycsArr) {
          ycsl++;
        }
        var zxsArr = isOnline(jczzId[key][k]);
        if (zxsArr) {
          zxsl++;
        }
      }
      jczzYjs.push(ycsl);
      jczzZxs.push(zxsl);
      this.loading2 = false;
      //   debugger
    }
    if (jczzZmc.length < 1) {
      this.nodata2 = true;
    }
    // 监测装置 判断设备是否异常
    function ycs(arr) {
      var retgjstate = false;
      arr.forEach((item) => {
        if (item.isErr === "err") {
          retgjstate = true;
          return;
        }
      });
      return retgjstate;
    }
    var jczzList = [];
    for (let index = 0; index < jczzZmc.length; index++) {
      jczzList.push({
        name: jczzZmc[index],
        total: jczzZs[index],
        early: jczzYjs[index],
        onLine: jczzZxs[index],
      });
    }
    if (jczzList.length < 1) {
      this.nodata2 = true;
    }
    this.dataList2 = jczzList;
    // console.log(jczzList,11111111111111);
    // console.log(jczzZxs);
    // console.log(jczzZs);
    // console.log(jczzZmc);
  }
  // 下方菜单data
  public menulist: menuListType[] = [
    {
      name: "油色谱",
      iconfont: "iconxiaofang",
      active: false,
      path: "OilColor",
    },
    {
      name: "铁芯接地电流",
      iconfont: "icongeipaishui",
      active: false,
      path: "IronCore",
    },
    {
      name: "机械特性",
      iconfont: "iconfloodLighting-o",
      active: false,
      path: "Mechanical",
    },
    {
      name: "光纤监测",
      iconfont: "iconanfang",
      active: false,
      path: "OpticalFiber",
    },
    {
      name: "避雷器监测",
      iconfont: "iconhuabanbeifen",
      active: false,
      path: "SurgeArrester",
    },
    {
      name: "声纹震动",
      iconfont: "iconfazhishezhi_huaban1",
      active: false,
      path: "Voiceprint",
    },
    {
      name: "开关柜测温",
      iconfont: "iconliandongguanli_huaban1",
      active: false,
      path: "SwitchCabinet",
    },
    {
      name: "N2压力监测",
      iconfont: "icongeipaishui",
      active: false,
      path: "N2",
    },
    {
      name: "SF6压力监测",
      iconfont: "iconfloodLighting-o",
      active: false,
      path: "SF6",
    },
    {
      name: "HGIS监测",
      iconfont: "iconanfang",
      active: false,
      path: "HGIS",
    },
    {
      name: "高压套管综合监测",
      iconfont: "iconhuabanbeifen",
      active: false,
      path: "GYTGZHJC",
    },
    {
      name: "有载分接开关监测",
      iconfont: "iconfazhishezhi_huaban1",
      active: false,
      path: "YZFJKGJC",
    },
    {
      name: "主变局放",
      iconfont: "iconliandongguanli_huaban1",
      active: false,
      path: "ZBJF",
    },
  ];

  // 下方菜单-点击进入二级页面
  handleMenuClick(item: menuListType, index: number) {}

  public colorLeft: number = 0;
  public colorRight: number = 0;
    public lefts: any = 0;
  //向左
  left() {
    if (this.lefts == 0) {
      return;
    } else {
      this.colorRight = 1;
      this.lefts = this.lefts + 25;
      if (this.lefts == 0) {
        this.colorLeft = 0;
      }
    }
  }
  //向右
  right() {
    if (this.lefts <= -(this.menulist.length - 4) * 25) {
      return;
    } else {
      this.colorLeft = 1;
      this.lefts = this.lefts - 25;
      if (this.lefts == -(this.menulist.length - 4) * 25) {
        this.colorRight = 0;
      }
    }
  }

  mounted() {
    this.init();
    this.sbInit();
  }
}
</script>
<style lang="scss" scoped>
.oil-color {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  .oil-color-in {
    width: calc(100% - 5rem);
    height: 100%;
    margin: 0 0.2rem;
    .top {
      width: 100%;
      height: calc(70% - 0.1rem);
    }
    .bottom {
      width: 10.4rem;
      height: calc(30% - 0.1rem);
      overflow-x: auto;
      display: inline-flex;
      align-items: center;
      > div {
        width: 1.75rem;
        height: 1.75rem;
        flex: none;
      }
    }
  }
  .oil-color-right {
    width: 5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    > div {
      width: 100%;
      height: 32%;
      .right-bottom {
        position: relative;
        height: calc(100% - 0.27rem);

        display: flex;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        > div {
          width: 36%;
          height: 36%;
          margin: 0.1rem 0.12rem;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          .text {
            font-size: 0.16rem;
          }
          .number {
            font-family: Medium;
            font-size: 0.26rem;
            margin-top: 0.05rem;
          }
          .red {
            color: #ed4e4a;
          }
          .blue {
            color: #49a7f9;
          }
        }
        .h-zs {
          background: url(../../../../assets/img/OnlineMonitor/h-zs.png)
            no-repeat;
          background-size: 100% 100%;
        }
        .l-sy {
          background: url(../../../../assets/img/OnlineMonitor/l-sy.png)
            no-repeat;
          background-size: 100% 100%;
        }
        .l-xz {
          background: url(../../../../assets/img/OnlineMonitor/l-xz.png)
            no-repeat;
          background-size: 100% 100%;
        }
        .l-xy {
          background: url(../../../../assets/img/OnlineMonitor/l-xy.png)
            no-repeat;
          background-size: 100% 100%;
        }
        .right-bottom-icon {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          width: 0.4rem;
          height: 0.4rem;
          border-radius: 50%;
          > img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    > div:nth-child(2) {
      margin: 0.15rem 0;
    }
  }
  .echa-box {
    width: 100%;
    height: calc(100% - 0.27rem);
    .echa {
      width: 100%;
      height: 100%;
    }
  }
  .InternetThings-con {
    width: 100%;
    height: 100%;
  }
}
</style>
